<template>
    <BasePage>
        <el-form slot="form" :inline="true" size="medium">
            <el-form-item label="巡查类型">
                <el-select v-model="query.type" clearable placeholder="请选择" style="width: 100%">
                    <el-option v-for="item in patrolType" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="巡查部门">
                <OrgSelect :value.sync="query.deptId"></OrgSelect>
            </el-form-item>
            <el-form-item label="公路名称">
                <RoadSelect :value.sync="query.highwayCode"></RoadSelect>
            </el-form-item>
            <el-form-item>
                <BaseButton v-permission="{ btnCode: 'dlyh_c7_d10_2' }" @click="handleFilter">查询</BaseButton>
                <BaseButton type="second" @click="resetConditions()">重置</BaseButton>
            </el-form-item>
        </el-form>
        <BaseButton slot="button" v-permission="{ btnCode: 'dlyh_c7_d12_2' }" @click="handleAdd"> 新建巡查计划 </BaseButton>
        <BaseTable slot="table" ref="table" v-loading="listLoading" :data="list" :columns="columns" highlight-current-row height="calc(100% - 73px)">
            <template #number="{ scope: { row } }">
                <BaseButton type="text" @click="detail(row.id)">{{ row.number }}</BaseButton>
            </template>
            <template #status="{ scope: { row } }">
                <el-switch v-model="row.status" v-permission="{ btnCode: 'dlyh_c7_d15_2' }" :active-value="1" :inactive-value="-1" active-color="#0062ff" @change="switchChange(row)"> </el-switch>
                <span style="margin-left: 8px">{{ row.statusName }}</span>
            </template>
        <template #content="{ scope: { row } }">
            <span>{{ row.content.join(',') }}</span>
        </template>
            <template #action="{ scope: { row } }">
                <BaseButton v-permission="{ btnCode: 'dlyh_c7_d13_2' }" type="text" :disabled="row.status === 1" @click="edit(row.id)"> 编辑 </BaseButton>
                <BaseButton v-permission="{ btnCode: 'dlyh_c7_d14_2' }" type="text" color="danger" :disabled="row.status === 1" @click="handleDelete(row.id)"> 删除 </BaseButton>
            </template>
        </BaseTable>
        <Pagination
            slot="pagination"
            :current-page.sync="page.pageNo"
            :page-size.sync="page.pageSize"
            :total="page.total"
            @size-change="getList"
            @current-change="getList"
        />
    </BasePage>
</template>

<script>
import BasePage from '@/layouts/BasePage'
import { InspectionPlanModel } from '@/models'
import useSuccess from '@/hooks/useSuccess'
import { patrolType } from '../../constants'
import KeepAliveHandler from '@/mixins/keepAliveHandler'
import reconfirm from '@/utils/reconfirm'
export default {
    name: 'PlanList',
    components: {
        BasePage
    },
    mixins: [
        KeepAliveHandler({
            defaultCondition: {
                type: null,
                highwayCode: null,
                deptId: []
            },
            conditionObjKey: 'query'
        })
    ],
    data() {
        return {
            model: new InspectionPlanModel(),
            page: {
                pageNo: 1,
                pageSize: 10,
                total: 0
            },
            listLoading: false,
            columns: [
                {
                    slot: 'number',
                    attrs: {
                        label: '编号',
                        width: '160',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        label: '巡查类型',
                        prop: 'typeName',
                        width: '160',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        label: '重复周期',
                        prop: 'repetitionPeriod',
                        width: '120',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        label: '开始执行日期',
                        prop: 'firstInspectDate',
                        width: '130'
                    }
                },
                {
                    attrs: {
                        label: '巡查部门',
                        prop: 'deptName',
                        width: '160',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        label: '创建人员',
                        prop: 'createUserName',
                        width: '140',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        label: '创建时间',
                        prop: 'createTime',
                        width: '160'
                    }
                },
                {
                    attrs: {
                        label: '公路名称',
                        prop: 'highwayName',
                        'min-width': '140',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        label: '巡查路段',
                        prop: 'inspectSection',
                        'min-width': '140',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    slot: 'content',
                    attrs: {
                        label: '巡查内容',
                        prop: 'content',
                        'min-width': '120',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    slot: 'status',
                    attrs: {
                        label: '状态',
                        'show-overflow-tooltip': true,
                        width: '160'
                    }
                },
                {
                    slot: 'action',
                    attrs: {
                        label: '操作',
                        width: '180',
                        fixed: 'right'
                    }
                }
            ],
            list: [],
            query: {}
        }
    },
    computed: {
        patrolType() {
            return patrolType
        }
    },
    created() {
        this.getList()
    },
    methods: {
        handleFilter() {
            this.page.pageNo = 1
            this.getList()
        },
        handleDelete(id) {
            reconfirm({
                isPromise: false,
                callback: () => {
                    this.model.delete({ id: id }).then((res) => {
                        useSuccess({ message: '删除成功', onlyTip: true })
                        this.getList()
                    })
                }
            })
        },
        handleAdd() {
            this.$router.push({
                path: './add'
            })
        },
        detail(id) {
            this.$router.push({
                path: './detail',
                query: {
                    id: id
                }
            })
        },
        edit(id) {
            this.$router.push({
                path: './edit',
                query: {
                    id: id
                }
            })
        },
        getList() {
            this.listLoading = true
            const query = {
                deptId: this.query.deptId ? this.query.deptId.join(',') : '',
                type: this.query.type,
                highwayCode: this.query.highwayCode
            }
            this.model
                .getList({ ...query }, this.page)
                .then((res) => {
                    this.list = res.list
                    this.page.total = res.totalCount
                })
                .finally(() => {
                    this.listLoading = false
                })
        },
        switchChange(item) {
            this.model.enable({ id: item.id, status: item.status }).then((res) => {
                useSuccess({ message: '操作成功', onlyTip: true })
                this.handleFilter()
            })
        }
    }
}
</script>

<style lang="scss" scoped>
</style>
